<!--
@author  tanyuze
@desc    打卡活动配置
@date    2022/11/10
-->
<template>
  <div class="clock-config">
    <div class="clock-config-title">新建/编辑活动配置</div>
    <section v-loading="loading" class="clock-config-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form">
        <el-form-item v-if="type !== 'CLOCK_ZYLX_CG'" label="打卡完成条件" prop="finishValue">
          <el-select
            v-model="form.finishValue"
            :class="{ 'config-condition': type !== 'CLOCK_ZYLX_CG', 'config-condition-other': type === 'CLOCK_ZYLX_CG' }"
            placeholder="请输入获得积分学习时长(秒)"
          >
            <el-option v-for="(i, n) in durationList" :key="n" :label="i.label" :value="i.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="type === 'CLOCK_ZYLX_CG'" label="打卡完成条件" prop="finishValue">
          <el-input
            v-model.number="form.finishValue"
            :class="{ 'config-condition': type !== 'CLOCK_ZYLX_CG', 'config-condition-other': type === 'CLOCK_ZYLX_CG' }"
            placeholder="请输入打卡完成条件"
          >
            <template slot="append">{{ type === 'CLOCK_ZYLX_CG' ? '次' : '秒' }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否关联抽奖" prop="isDraw">
          <el-radio-group v-model="form.isDraw">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="抽奖配置" prop="bigturntableId">
          <div>
            <el-button class="button-new-tag" size="small" @click="showInputRwys">抽奖配置</el-button>
          </div>
          <div>
            <el-tag v-if="dialogMultipleSelections.bigturntableName !== undefined" closable @close="handleCloses(dialogMultipleSelections)">
              {{ dialogMultipleSelections.bigturntableName || bigturntableName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="抽奖条件" prop="drawChance">
          <el-input v-model.number="form.drawChance" placeholder="请输入获得抽奖次数" />
          <div style="color: #999999;">完成一次打卡可获得几次抽奖机会</div>
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="抽奖次数上限" prop="allDrawTimes">
          <el-input v-model.number="form.allDrawTimes" placeholder="请输入最多获得抽奖次数" />
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="抽奖弹窗标题" prop="popTitle">
          <el-input v-model="form.popTitle" autosize placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="抽奖弹窗引导按钮" prop="popButton">
          <el-input v-model="form.popButton" autosize placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="抽奖弹窗样式选择" prop="popStyle">
          <el-select v-model="form.popStyle" autosize placeholder="请选择">
            <el-option v-for="item in popStyleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-image style="width: 375px;margin-top: 10px;" :src="popStyleList[form.popStyle].imagesOss" />
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1" label="是否自定义抽奖说明" prop="isDrawRemark">
          <el-radio-group v-model="form.isDrawRemark">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isDraw == 1 && form.isDrawRemark == 1" label="抽奖说明" prop="drawExplain">
          <el-input v-model="form.drawExplain" :rows="6" type="textarea" placeholder="请输入说明" />
        </el-form-item>
      </el-form>
    </section>
    <section class="clock-config-footer">
      <el-button style="padding: 10px 30px;" @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit('form')">确 定</el-button>
    </section>

    <!-- 选择转盘 -->
    <el-dialog title="选择抽奖配置" :visible.sync="dialogFormVisibles" center fullscreen :close-on-click-modal="false">
      <choose-prize ref="resetAll" :before-list="beforeLists" :bigturntable-id="form.bigturntableId" @userData="userDatas" />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px" @click="dialogFormVisibles = false">取消</el-button>
        <el-button style="padding: 8px 30px" type="primary" @click="insertUsers()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getConfig, insertConfig, getByActivityId } from '../api'
import { int } from '@/utils/validate'
import choosePrize from '../components/choosePrize'
export default {
  name: 'ClockConfiguration',
  components: { choosePrize },
  data() {
    return {
      popStyleList: [
        {
          id: 0,
          name: '样式一',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202cc96931db26743919206900e8a2f390d.png'
        },
        {
          id: 1,
          name: '样式二',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/22120231f566d987e046718fe2eeae498020b6.png'
        },
        {
          id: 2,
          name: '样式三',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212027a85a262f6da40b8ab08ff5f8788f276.png'
        },
        {
          id: 3,
          name: '样式四',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202d7f2d0d9c2cd40d1a474301bdae7e155.png'
        },
        {
          id: 4,
          name: '样式五',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212026bf78ddb405c4affa83fab281ba8cf02.png'
        },
        {
          id: 5,
          name: '样式六',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202827b3f4b16a54addb0ae0fdc1d0ac910.png'
        },
        {
          id: 6,
          name: '样式七',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202ff3f9084d3bb4f1abb6ca173f24a253b.png'
        },
        {
          id: 7,
          name: '样式八',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212022fc3e4e4f9484ceabea370fab0c5e407.png'
        }
      ],
      loading: false,
      form: {
        popTitle: '',
        popButton: '',
        popStyle: 0,
        finishValue: '',
        isDraw: 0,
        bigturntableId: '',
        drawChance: '',
        allDrawTimes: '',
        isDrawRemark: 0,
        drawExplain: ''
      },
      rules: {
        finishValue: [{ required: true, message: '请输入完成打卡条件', trigger: 'blur' }, { validator: int, trigger: 'blur' }],
        bigturntableId: [
          {
            required: true,
            message: '请关联抽奖配置',
            trigger: 'blur'
          }
        ],
      },
      activityId: '',
      taskId: '',
      type: '',
      dialogFormVisibles: false,
      beforeLists: [],
      dialogMultipleSelections: {},
      durationList: [
        { value: '0', label: '0秒' },
        { value: '30', label: '30秒' },
        { value: '60', label: '60秒' },
        { value: '120', label: '120秒' },
        { value: '180', label: '180秒' },
        { value: '300', label: '300秒' }
      ]
    }
  },
  created() {
    if (!this.$route.query.i) {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
      return
    }
    this.activityId = this.$route.query.i
    this.type = this.$route.query.type
    this.getConfigList()
  },
  methods: {
    handleCloses(dialogMultipleSelections) {
      this.dialogMultipleSelections = {}
      this.form.bigturntableId = ''
    },
    // 确定选择抽奖配置
    insertUsers() {
      if (JSON.stringify(this.dialogMultipleSelections) === '{}') {
        this.$message({
          message: '请选择抽奖配置',
          type: 'warning'
        })
      } else {
        this.$set(this.form, 'bigturntableId', this.dialogMultipleSelections.id)
        // this.$set(this.form, 'bigturntableName', this.dialogMultipleSelections.bigturntableName)
        this.dialogFormVisibles = false
      }
    },

    userDatas(val) {
      this.dialogMultipleSelections = val
    },

    showInputRwys() {
      this.dialogFormVisibles = true
    },
    /*
     * 获取任务
     * */
    getConfigList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getByActivityId({ activityId: this.activityId })
          .then((res) => {
            loading.close()
            if (res.data && res.data.code === '200') {
              console.log('200')
              if (res.data.data) {
                console.log('300')
                this.taskId = res.data.data.id
                // this.getData(res.data.data.id)
                for (const key in this.form) {
                  this.form[key] = res.data.data[key]
                }
                this.$set(this.form, 'popStyle', this.form.popStyle ? this.form.popStyle : 0)
                if (res.data.data.bigturntableName) {
                  this.$set(this.dialogMultipleSelections, 'bigturntableName', res.data.data.bigturntableName)
                }
              } else {
                this.taskId = ''
              }
            }
            resolve()
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },
    /*
     * 获取任务详情
     * */
    getData(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getConfig({ id: id })
          .then((res) => {
            loading.close()
            if (res.data && res.data.data) {
              // this.$set(this.form, 'finishValue', res.data.data.finishValue)
            }
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },

    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = Object.assign({}, this.form)
          params['activityId'] = this.activityId
          params['id'] = this.taskId
          if (this.form.isDraw === 0) {
            delete params.bigturntableId
            delete params.drawChance
            delete params.allDrawTimes
            delete params.isDrawRemark
            delete params.drawExplain
            delete params.popStyle
            delete params.popButton
            delete params.popTitle
          } else if (this.form.isDraw !== 0 && this.form.isDrawRemark === 0) {
            delete params.drawExplain
          }
          return new Promise((resolve, reject) => {
            insertConfig(params)
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.back()
              })
              .catch((error) => {
                reject(error)
                loading.close()
              })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    handleCancel() {
      this.$router.back()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.clock-config {
  overflow: hidden;
  background-color: #ffffff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);

  .clock-config-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .clock-config-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }

    .form {
      width: 1000px !important;
      margin: 0 auto;

      .el-select {
        width: 100%;
      }

      .line {
        text-align: center;
      }

      .config-condition {
        &:after {
          content: '*观看/收听任意资源都可完成打卡';
          position: absolute;
          @include font-color($mainColor);
          top: 40px;
          right: 10px;
          font-weight: bold;
          font-size: 12px;
        }
      }
      .config-condition-other {
        &:after {
          content: '*完成任意次数的通关即可完成打卡';
          position: absolute;
          @include font-color($mainColor);
          top: 40px;
          right: 10px;
          font-weight: bold;
          font-size: 12px;
        }
      }
    }
  }

  .clock-config-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
